import React, { Component, Fragment } from 'react'

import XiaoJieJieItem from './XiaoJieJieItem'

export default class XiaoJieJie extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputValue: '', // 输入框的值
      serviceList: ['头部按摩', '精油推背'] // 服务列表
    }
  }

  inputChange = (e) => {
    const { value } = e.target
    this.setState({ inputValue: value })
  }

  addService = () => {
    const { serviceList, inputValue } = this.state
    this.setState({ serviceList: [...serviceList, inputValue]})
    this.setState({ inputValue: '' })
  }

  deleteService = (index,e) => {
    const { serviceList } = this.state
    const newList = serviceList.filter((item, i) => {
      return index !== i
    })
    this.setState({serviceList: newList})
  }

  render() {
    const { serviceList, inputValue } = this.state
    return (
      <Fragment>
        <div>
          <input type="text" value={inputValue} onChange={this.inputChange} />
          <button onClick={this.addService}> 增加服务 </button>
        </div>
        <ul>
          {
            serviceList.map((item, index) => {
              return (
                <XiaoJieJieItem key={index} content={item} index={index} deleteItem={this.deleteService.bind(this)}/>
                // <li key={index + item} onClick={(e) => this.deleteService(index,e)}>{item}</li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  }
}